<template>
    <div class="left">
     <el-row  :gutter="4" type="flex" align="middle" >
      <el-col :span="8"  v-for="item in centent" :key="item.id" >
        <el-card shadow="hover" class="left-content" >
<!--          里面的内容-->
            <el-row type="flex" justify="center" align="middle" class="left-content-center ">
             <el-col :span="10">
               <i :class="item.icon" style="font-size: 40px"></i>
               <br >
               <span style="padding-top: 5px">
                  {{item.name}}
            </span>
             </el-col>
            </el-row>
        </el-card>
      </el-col>
     </el-row>
    </div>

</template>

<script>
export default {
  name: 'Left',
  data () {
    return {
      centent: [
        { name: '实名认证', icon: 'el-icon-user-solid', url: '' },
        { name: '积分商城', icon: 'el-icon-product', url: '' },
        { name: '优惠团购', icon: 'el-icon-present', url: '' }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
 .left-content {
   height: 80px;
   font-size: 8px;
   background: #EBEEF5;
   /deep/ div {
     padding: 0;
   }
   /deep/ .el-card__body {
     height: 100%;
   }
   .left-content-center {
     height: 100%;
   }
 }
</style>
